<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{background: red;}
    </style>
</head>
<body>
    <div class="box" style="width:200px;height:100px;">hello world</div>
</body>
<script>
    
    var box = document.querySelector(".box")

    // 行内样式操作
    console.log( box.style );
    console.log( box.style.width );
    console.log( box.style.height );
    
    console.log( box.style.background );
    console.log( box.style.abc );

    // 改
    box.style.width = "400px";
    // 增
    box.style.border = "solid 10px green";

    // 不是删除属性
    // delete box.style.height;
    // 而是覆盖（清空，设置为默认值）
    // box.style.height = "auto";
    box.style.height = "";

    // 行内样式操作 只能获取 行内样式
    // 行内样式操作 无法获取 非行内样式






</script>
</html>